<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-12-20 10:02:58
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-12-20 14:56:22
 * @FilePath: \cxl-driving-training\src\views\system\complaint\list\Index.vue
-->
<template>
    <div class="page-box">
        <TemplateVue
            :page="data.pageData"
            @search="data.onSearch"
            @reset="data.onReset"
            @paginationChange="data.onPaginationChange"
            @paginationSize="data.onPaginationSize"
            @operation="data.onOperation"
        >
        </TemplateVue>
        <BasicDialogVue :data="data.dialog" @close="data.onCloseDialog">
            <template #content>
                <div class="complaint-box">
                    <span>名字：</span>
                    <span>类型：</span>
                    <span>渠道：</span>
                    <span>联系方式：</span>
                    <span>投诉时间：</span>
                </div>
                <div class="complaint-content">
                    <p>内容：</p>
                    <div></div>
                </div>
                <template v-if="data.dialog.type === 'look'">
                    <div class="look">
                        <h1>处理记录</h1>
                        <el-timeline>
                            <el-timeline-item v-for="(activity, index) in data.activities" :key="index">
                                <template #default>
                                    <div class="timeline-item">
                                        <p>2023.12.12 14:34:45 木子李 <span>已处理</span></p>
                                        {{ activity.content }}
                                    </div>
                                </template>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </template>
                <template v-else-if="data.dialog.type === 'edit'">
                    <div class="complaint-progress">
                        处理进度：<el-select clearable v-model="data.progress">
                            <el-option
                                v-for="itemOption in data.progresseOptions"
                                :key="itemOption.value"
                                :label="itemOption.label"
                                :value="itemOption.value"
                            />
                        </el-select>
                    </div>
                    <p class="complaint-appeal">客户诉求：</p>
                    <el-input v-model="data.appeal" type="textarea" clearable placeholder="请填写客户诉求" />
                </template>
                <div class="btn">
                    <el-button @click="data.onCloseDialog" v-if="data.dialog.type == 'edit'">取消</el-button>
                    <el-button type="primary" @click="data.submitForm">确定</el-button>
                </div>
            </template>
        </BasicDialogVue>
    </div>
</template>
<script setup lang="ts">
import TemplateVue from '@/components/template/Index.vue'
import ComplaintData from '.'
import { reactive } from 'vue'
import BasicDialogVue from '@/components/baseDialog/Index.vue'

const data = reactive(new ComplaintData())
</script>

<style scoped lang="scss">
.time {
    display: flex;
}
.btn {
    display: flex;
    justify-content: center;
    margin: 40px 0 16px 0;
}

.complaint-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.complaint-content {
    margin-bottom: 16px;
}
.complaint-progress {
    margin-bottom: 16px;
}
.complaint-appeal {
    margin-bottom: 8px;
}

.look {
    h1 {
        font-size: 18px;
        margin-bottom: 16px;
    }
    .timeline-item {
        span {
            background-color: #666;
            color: #fff;
            border-radius: 10px;
            padding: 2px 8px;
            font-size: 12px;
        }
    }
}
</style>
